<template>
  <a-modal v-model:visible="visible" title="充值余额" :on-before-ok="confirm">
    <a-row justify="center">
      <a-form-item field="balance" label="用户余额">
        <a-input-number
          v-model="form.balance"
          :style="{ width: '320px' }"
          placeholder="请输入充值金额（可填负数）"
          class="input-demo"
        />
      </a-form-item>
    </a-row>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { Message, Modal, type FormInstance } from '@arco-design/web-vue'
import { IconEdit, IconPlus } from '@arco-design/web-vue/es/icon'
import { getCustomerList, uploadImage, updateCustomer, uploadBalance } from '@/apis'

type Form = { name: string; phone: string; status: boolean }
const form: Form = reactive({
  id: '',
  balance: ''
})

const emits = defineEmits(['reFreshTable'])

const visible = ref(false)
const formRef = ref<FormInstance>()

const confirm = async () => {
  if (form.balance == '') {
    Message.error('请输入充值金额')
    return false
  }
  let type = ''
  if (form.balance > 0) {
    type = 'increase'
  } else if (form.balance < 0) {
    type = 'reduce'
  } else {
    Message.error('余额未发生变化，无需保存！')
    return false
  }
  uploadBalance(
    {
      customer_id: form.id,
      amount: Math.abs(form.balance)
    },
    type
  ).then((res) => {
    let resData = JSON.parse(res)
    if (resData.code === 200) {
      Message.success(resData.message)
      visible.value = false
      form.id = ''
      form.balance = ''
      emits('reFreshTable')
    } else {
      Message.error(resData.message)
      return false
    }
  })
}

const edit = (id: string) => {
  form.id = id
  visible.value = true
}

defineExpose({ edit })
</script>

<style lang="scss" scoped>
:deep(.arco-collapse-item-content) {
  background: none;
}
</style>
